<template>
  <div>
    <NavBar title="在线购药" />
    <nav>
      <van-search
        placeholder="搜索疾病、症状、药品名"
        style="width: 100%; height: 40px; marign-top: -20px"
        shape="round"
        @click="$router.push('/search')"
      />
      <Barrage />
    </nav>
    <main>
      <div id="usual">
        <p class="title">常见问题</p>
        <div id="usuImg">
          <van-grid square :border="false" :icon-size="55">
            <van-grid-item
              v-for="item in keywordobj.data"
              :key="item.title"
              :icon="item.img"
              :text="item.title"
              @click="
                store.changeParams({ word: item.title }),
                  $router.push('/search?word=' + item.title)
              "
            />
          </van-grid>
        </div>
      </div>
      <div id="logos">
        <img
          src="https://cdn.moguvet.com/custom/front/drug/kaiyao.png"
          alt=""
        />
      </div>
      <div v-for="item in keywordlist" :key="item.name">
        <p class="title">
          {{ item.name }}
        </p>
        <div id="btns">
          <van-button
            class="btn"
            v-for="val in item.data"
            :key="val"
            type="default"
            @click="
              store.changeParams({ word: val }),
                $router.push('/search?word=' + val)
            "
            >{{ val }}</van-button
          >
        </div>
      </div>
    </main>
    <footer>
      <div id="left">
        <p><van-icon size="20" name="bag" /></p>
        <p id="sleft">
          <span>已添加0种药品</span>
          <span>￥0</span>
        </p>
      </div>
      <van-button id="next" type="default">下一步</van-button>
    </footer>
  </div>
</template>
<script setup>
import { useCount } from "../store/index.js";
import Barrage from "../components/Consult/Barrage.vue";
import NavBar from "../components/NavBar.vue";
let store = useCount();
const keywordobj = {
  name: "常见问题",
  data: [
    {
      img: "https://cdn.moguvet.com/drug/2020/10/e7a03ff614722c744bf0f0ae7ffaa066.JPG",
      title: "呕吐",
    },
    {
      img: "https://cdn.moguvet.com/drug/2020/10/5f3c9c96255b33755eab825cb212e1fb.JPG",
      title: "腹泻",
    },
    {
      img: "https://cdn.moguvet.com/drug/2020/10/2d3a8f5eecbfaced1c7d8d6a700b7bed.JPG",
      title: "咳嗽",
    },
    {
      img: "https://cdn.moguvet.com/drug/2020/10/82f4028ca3e1337dbbed22fc7cb235e7.JPG",
      title: "呼吸道感染",
    },
    {
      img: "https://cdn.moguvet.com/drug/2020/10/049ab1e55b872e92f35b626a614d8afa.png",
      title: "黑下巴",
    },
    {
      img: "https://cdn.moguvet.com/drug/2020/10/baaefdbdab8d357ffc5581db33a9a98e.JPG",
      title: "猫癣",
    },
    {
      img: "https://cdn.moguvet.com/drug/2020/10/72083e3c110f374801d4ac99c5bea550.JPG",
      title: "肠炎",
    },
    {
      img: "https://cdn.moguvet.com/drug/2020/10/2b2850f96a78aecfa789f312ed125c02.JPG",
      title: "皮肤病",
    },
  ],
};
const keywordlist = [
  {
    name: "驱虫问题",
    data: ["蛔虫", "蜱虫", "跳蚤", "耳螨", "大宠爱", "福来恩"],
  },
  {
    name: "皮肤病用药",
    data: ["猫藓", "脂溢性皮炎", "蠕形螨", "脓皮症", "细菌感染", "真菌感染"],
  },
  {
    name: "消化系统",
    data: ["呕吐", "腹泻", "便秘", "尿道结石", "顽固性腹泻", "便血"],
  },
  {
    name: "内科疾病",
    data: ["肾衰竭", "肝炎", "黄疸", "慢性胃炎", "胰腺炎", "肝脏问题"],
  },
];
</script>
<style scoped>
nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 30px 0;
}
.font-bold {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0;
  color: #b0914e;
}
.font-bold div {
  margin-right: 10px;
}
.font-bold p {
  margin: 0 10px;
}
main {
  width: 100%;
  margin-bottom: 200px;
}
.title {
  height: 40px;
  font-size: 30px;
  color: #7d7d7d;
  padding: 0 40px;
}
#logos {
  width: 100%;
}
#logos img {
  width: 100%;
}
#usuImg {
  margin-bottom: 20px;
}
#btns {
  padding: 10px 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.btn {
  width: 220px;
  margin: 10px 10px;
  border: none;
  background-color: #f7f7f7;
}
footer {
  width: 100%;
  height: 120px;
  padding: 10px 20px;
  box-sizing: border-box;
  position: fixed;
  bottom: 100px;
  left: 0;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e0e0e0;
}
#left {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#left p:nth-of-type(1) {
  width: 80px;
  height: 80px;
  background-color: #efefef;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 30px;
}
#sleft {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
#sleft span:nth-of-type(1) {
  font-size: 30px;
}
#sleft span:nth-of-type(2) {
  margin-top: 10px;
  color: #f39035;
  font-weight: bold;
}
#next {
  width: 250px;
  height: 70px;
  background-color: #efefef;
  border: none;
  font-size: 35px;
  font-weight: bold;
  color: #7d7d7d;
  border-radius: 40px;
}
</style>
